<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/semantic.css">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/cola.css">
	<script src="../../resources/jquery-2.1.3.js"></script>
	<script src="../../resources/cola-ui/3rd.js"></script>
	<script src="../../resources/cola-ui/semantic.js"></script>
	<script src="../../resources/cola-ui/cola.js"></script>
	<script src="../../resources/cola-ui/i18n/zh/cola.js"></script>

	<link rel="stylesheet" type="text/css" href="gauge.css">
	<script type="text/javascript">
		cola(function(model) {
			model.set("score", 60);
		});
	</script>
</head>
<body style="padding:1em">
	<input c-bind="score" type="number" step="20" max="120">

	<div class="progress" c-class="invalid: score < 0 || score > 100; pass:score >= 60">
		<div class="score" c-bind="score" c-style="width: score + '%'"></div>
	</div>

	<div class="gauge" c-class="invalid: score < 0 || score > 100; pass:score >= 60">
		<div class="score" c-style="transform: 'rotate(' + (score * 1.8) + 'deg)';"></div>
	</div>
</body>
</html>
